<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Introducing Lemonade Arcade: AI-Powered Retro Game Creation</title>
  <link rel="icon" href="../assets/favicon.ico">
  <link rel="stylesheet" href="../assets/website-styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <script>
    // Define the article description once to avoid repetition
    const ARTICLE_DESCRIPTION = "Lemonade Arcade, a new application that transforms your GPU into a creative engine for generating retro-style games using AI!";
  </script>
  <meta name="description" content="Lemonade Arcade, a new application that transforms your GPU into a creative engine for generating retro-style games using AI!">
  <meta property="og:title" content="Introducing Lemonade Arcade: AI-Powered Retro Game Creation">
  <meta property="og:description" content="Lemonade Arcade, a new application that transforms your GPU into a creative engine for generating retro-style games using AI!">
  <meta property="og:type" content="article">
  <meta property="article:published_time" content="2025-08-22">
  <meta property="article:author" content="Lemonade Team">
</head>
<body>
  <!-- Navbar -->
  <nav class="navbar" id="navbar">
    <div class="navbar-brand">
      <span class="brand-title"><a href="https://lemonade-server.ai">🍋 Lemonade Server</a></span>
    </div>
    <div class="navbar-links">
      <a href="https://github.com/lemonade-sdk/lemonade">GitHub</a>
      <a href="../docs/">Docs</a>
      <a href="../docs/server/server_models/">Models</a>
      <a href="../docs/server/apps/">Featured Apps</a>
      <a href="index.html">News</a>
    </div>
  </nav>

  <!-- Article Content -->
  <main class="main">
    <article class="blog-article">
      <!-- Hero Section -->
      <div class="hero-section">
        <div class="hero-content">
          <div class="hero-badge">🎮 New App</div>
          <h1 class="hero-title">Introducing Lemonade Arcade: <br> AI-Powered Retro Game Creation</h1>
          <div class="hero-subtitle" id="article-subtitle">
            <!-- Content will be populated by JavaScript -->
          </div>
          <div class="hero-meta">
            <div class="meta-item">
              <span>📅</span>
              <span>August 22, 2025</span>
            </div>
            <div class="meta-item">
              <span>✍️</span>
              <span>Lemonade Team</span>
            </div>
            <div class="meta-item">
              <span>📖</span>
              <span>Blog Post</span>
            </div>
          </div>
        </div>
      </div>

      
      <div class="article-content">
          <div class="section-card">
            <!-- Hero Image -->
            <div style="text-align: center; margin: 2rem 0;">
              <img src="https://github.com/lemonade-sdk/lemonade-arcade/raw/main/img/banner.png" alt="Lemonade Arcade Banner" style="max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
            </div>
          <h2 class="section-title">What if your GPU could imagine games?</h2>
          <p>Meet Lemonade Arcade, a new application that transforms your GPU into a creative engine for retro-style games. Just enter a prompt with your vision and within minutes, a playable Python game pops open.</p>

          <!-- Lemonade Arcade Demo GIF -->
          <div style="text-align: center; margin: 2rem 0;">
            <img src="https://github.com/lemonade-sdk/assets/raw/main/arcade/LemonadeArcade_GIF_Smallest.gif" alt="Lemonade Arcade Demo" style="max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);">
          </div>

          <div class="feature-grid">
            <div class="feature-item">
              <div style="display: flex; align-items: center; margin-bottom: 0.75rem;">
                <span class="feature-icon">🕹️</span>
                <strong>AI Game Generation</strong>
              </div>
              <p style="margin: 0; color: #666;">Input your idea, for example "asteroids with rainbow lasers" and in minutes, get a playable game.</p>
            </div>
            <div class="feature-item">
              <div style="display: flex; align-items: center; margin-bottom: 0.75rem;">
                <span class="feature-icon">📚</span>
                <strong>Game Library & Easy Management</strong>
              </div>
              <p style="margin: 0; color: #666;">All creations saved and ready to replay. View source code and original prompts.</p>
            </div>
            <div class="feature-item">
              <div style="display: flex; align-items: center; margin-bottom: 0.75rem;">
                <span class="feature-icon">🍋</span>
                <strong>Lemonade Integration</strong>
              </div>
              <p style="margin: 0; color: #666;">Lemonade Server is fully integrated allowing the application to performantly run the LLM locally.</p>
            </div>
          </div>
        </div>

        <div class="section-card">
          <h2 class="section-title">Powered by Qwen3-Coder-30B MoE LLM</h2>
          <p>Under the hood of Lemonade Arcade is a 30 billion parameter language model, served locally via Lemonade Server. This powerful setup ensures fast, responsive game generation—provided your hardware meets the specifications.</p>

          <div class="model-showcase">
            <div class="model-card-enhanced">
              <div class="model-title">
                Chat-Style Interface
                <span class="model-badge">Familiar</span>
              </div>
              <p style="font-size: 1rem; color: #666; margin-bottom: 1rem;">Simple chat interface for describing your game ideas</p>
              <div style="background: rgba(255, 224, 102, 0.1); padding: 1rem; border-radius: 8px; margin-bottom: 1rem;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
                  <span style="font-weight: 600;">Input Method:</span>
                  <span>Natural Language</span>
                </div>
                <div style="display: flex; justify-content: space-between;">
                  <span style="font-weight: 600;">Output:</span>
                  <span>Playable Python Games</span>
                </div>
              </div>
              <p style="font-size: 0.9rem; color: #888; margin: 0;">Just type what you want, and watch it come to life</p>
            </div>
          </div>
        </div>

        <div class="section-card">
          <h2 class="section-title">From Prompt to Playable</h2>
          <p>Lemonade Arcade combines the simplicity of a chat-style interface with the magic of a game emulator. But instead of emulating old games, it generates entirely new ones based on your ideas. Whether you're a developer, hobbyist, or just curious about AI creativity, Lemonade Arcade makes game creation fast, fun, and endlessly remixable.</p>

          <h3 style="color: #333; margin: 2rem 0 1rem 0; font-size: 1.3rem;">How It Works</h3>
          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 1.5rem 0;">
            <div style="background: linear-gradient(135deg, #fff9e6 0%, #fff5cc 100%); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(255, 224, 102, 0.3);">
              <h4 style="margin: 0 0 1rem 0; color: #e6b800; display: flex; align-items: center; gap: 0.5rem;">
                <span>💭</span>
                1. Describe Your Game
              </h4>
              <p style="margin: 0; color: #666;">Enter a simple prompt describing the game you want to create.</p>
            </div>
            <div style="background: linear-gradient(135deg, #fff9e6 0%, #fff5cc 100%); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(255, 224, 102, 0.3);">
              <h4 style="margin: 0 0 1rem 0; color: #e6b800; display: flex; align-items: center; gap: 0.5rem;">
                <span>⚡</span>
                2. AI Generation
              </h4>
              <p style="margin: 0; color: #666;">The 30B parameter model generates Python game code.</p>
            </div>
            <div style="background: linear-gradient(135deg, #fff9e6 0%, #fff5cc 100%); padding: 1.5rem; border-radius: 12px; border: 1px solid rgba(255, 224, 102, 0.3);">
              <h4 style="margin: 0 0 1rem 0; color: #e6b800; display: flex; align-items: center; gap: 0.5rem;">
                <span>🎮</span>
                3. Play Instantly
              </h4>
              <p style="margin: 0; color: #666;">Your game opens and is ready to play within minutes.</p>
            </div>
          </div>

          <h3 style="color: #333; margin: 2rem 0 1rem 0; font-size: 1.3rem;">Example Prompt</h3>
          <div class="enhanced-code-block">
            <div class="code-header">
              <span class="code-title">Space Invaders Twist</span>
              <div class="code-dots">
                <div class="code-dot red"></div>
                <div class="code-dot yellow"></div>
                <div class="code-dot green"></div>
              </div>
            </div>
            <pre><code>"Make Space Invaders, but I can fly around the whole screen instead of being stuck on the bottom"</code></pre>
            </div>
          <div style="text-align: center; margin-top: 1rem;">
            <img src="https://github.com/lemonade-sdk/assets/raw/main/arcade/space_invaders_x.gif?raw=true" alt="Space Invaders X" style="max-width: 100%; border-radius: 12px;" />
          </div>
        </div>

        <!-- Call to Action Section -->
        <div class="cta-section">
          <div class="cta-content">
            <h2 class="cta-title">Ready to Create Games with AI?</h2>
            <p style="font-size: 1.1rem; margin: 0 0 2rem 0; color: #333;">Transform your ideas into playable games with the power of AI and Lemonade Server!</p>
            
            <div class="cta-links">
              <a href="https://github.com/lemonade-sdk/lemonade-arcade/releases/latest/download/LemonadeArcade.exe" class="cta-link" target="_blank" rel="noopener">
                <div style="display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
                  <span>📥</span>
                  <span>Download Lemonade Arcade</span>
                </div>
              </a>
              <a href="https://discord.gg/5xXzkMu8Zk" class="cta-link" target="_blank" rel="noopener">
                <div style="display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
                  <span>💬</span>
                  <span>Join Discord</span>
                </div>
              </a>
              <a href="https://github.com/lemonade-sdk/lemonade-arcade/" class="cta-link" target="_blank" rel="noopener">
                <div style="display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
                  <span>🐙</span>
                  <span>GitHub Repo</span>
                </div>
              </a>
            </div>
            
            <div style="margin-top: 2rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.8); border-radius: 12px; backdrop-filter: blur(10px);">
              <p style="margin: 0; font-size: 1.1rem; font-weight: 600; color: #333;">
                🎮 Experience the future of game creation—where your imagination meets AI power!
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Back to News Button -->
      <div class="article-navigation">
        <a href="index.html" class="back-to-news-btn">← Back to News</a>
      </div>
    </article>
  </main>

  <!-- Footer will be inserted here by footer.js -->
  <div class="footer-placeholder"></div>
  
  <script src="../assets/footer.js"></script>
  <script>
    // Initialize footer with star count (uses ../ basePath)
    document.addEventListener('DOMContentLoaded', () => {
      initializeFooter('../');
      
      // Populate meta tags and subtitle with the description
      document.querySelector('meta[name="description"]').setAttribute('content', ARTICLE_DESCRIPTION);
      document.querySelector('meta[property="og:description"]').setAttribute('content', ARTICLE_DESCRIPTION);
      document.getElementById('article-subtitle').textContent = `We're excited to announce ${ARTICLE_DESCRIPTION} 🎉`;
    });
  </script>
</body>
</html>
